<!--//   Copyright 2019 Esri
//   Licensed under the Apache License, Version 2.0 (the "License");
//   you may not use this file except in compliance with the License.
//   You may obtain a copy of the License at

//       http://www.apache.org/licenses/LICENSE-2.0

//   Unless required by applicable law or agreed to in writing, software
//   distributed under the License is distributed on an "AS IS" BASIS,
//   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//   See the License for the specific language governing permissions and
//   limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type='text/css'>
        .even-row {
            background: #ffffff;
            font-weight: normal;
        }
        .odd-row {
            background: #efeeef;
            font-weight: normal;
        }
    </style>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1.1", { packages: ["table", "corechart"] });
        google.setOnLoadCallback(drawTable);

        function drawTable() {
            var data = new google.visualization.DataTable();
            //data.addColumn
            var options = {
                'showRowNumber': false, 'width': '100%', 'cssClassNames': {
                    'headerRow': 'odd-row', 'oddTableRow': 'odd-row ', 'tableRow': 'even-row', 'hoverTableRow': 'even-row'
                }
            };

            var formatter = new google.visualization.NumberFormat({ suffix: '%', fractionalDigits: '2' });
            formatter.format(data, 2);

            var table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, options);

            var chartAreaHeight = data.getNumberOfRows() * 25;
            var chartHeight = chartAreaHeight + 60;

            var chartOptions = {
                legend: { position: "none" },
                height: chartHeight,
                chartArea: {
                    height: chartAreaHeight
                },
                vAxis: { "title": data.getColumnLabel(0) },
                hAxis: { "title": data.getColumnLabel(1) }
            };

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1]);

            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(view, chartOptions);

            google.visualization.events.addListener(table, 'select',
			  function (e) {
			      var selection = table.getSelection();
			      chart.setSelection(selection);
			  });

            google.visualization.events.addListener(chart, 'onmouseover',
			  function (e) {
			      table.setSelection([{ row: e.row, column: null }]);
			      chart.setSelection([{ row: e.row, column: null }]);
			  });

            google.visualization.events.addListener(chart, 'onmouseout',
			  function (e) {
			      table.setSelection();
			      chart.setSelection();
			  });
        }
    </script>
</head>
<body>
    <div id="table_div"></div>
    <div id="chart_div"></div>
</body>
</html>
